<template>
  <div>
  <mbx lenev="用户管理" lenev1="角色列表" lenev2="权限管理"></mbx>
    <el-card class="box-card" style="margin-top: 20px">
      <el-row :gutter="24">
        <el-col :span="12"
          ><div class="grid-content bg-purple-dark">
            <el-input
              placeholder="请输入内容"
              v-model="obj.query"
              class="input-with-select"
              clearable
              @clear="sou"
              @input="sou"
            >
              <el-button slot="append" icon="el-icon-search" @click="sou"></el-button>
            </el-input></div
        ></el-col>
        <el-col :span="12"
          ><div class="grid-content bg-purple-dark">
            <el-button type="primary" @click="dialogFormVisibleAdd = true"
              >添加用户</el-button
            >
          </div></el-col
        >
      </el-row>

      <el-dialog title="添加用户" :visible.sync="dialogFormVisibleAdd">
        <el-form :model="formAdd" :rules="fromRules" ref="fromTj">
          <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
            <el-input v-model="formAdd.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
            <el-input v-model="formAdd.password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
            <el-input v-model="formAdd.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile" :label-width="formLabelWidth">
            <el-input v-model="formAdd.mobile"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>

   <el-dialog title="编辑用户" :visible.sync="dialogFormVisibleXiu">
        <el-form :model="formAdd" :rules="fromRules" ref="fromBian">
          <el-form-item disabled label="用户名" prop="username" :label-width="formLabelWidth">
            <el-input v-model="formAdd.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
            <el-input v-model="formAdd.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile" :label-width="formLabelWidth">
            <el-input v-model="formAdd.mobile"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleXiu = false">取 消</el-button>
          <el-button type="primary" @click="xiu">确 定</el-button>
        </div>
      </el-dialog>

      <el-table :data="data" border style="width: 100%; margin-top: 20px">
        <el-table-column type="index" label="#" width="80"> </el-table-column>
        <el-table-column prop="username" label="姓名" > </el-table-column>
        <el-table-column prop="mobile" label="电话" > </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state" @change="Tai(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="bian(scope.row)"
            ></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle @click="jue(scope.row)"></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="del(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

 <el-dialog
  title="分配角色"
  :visible.sync="JueSe"
  width="35%">
  <div>
    <p>当前用户：{{jueform.username}}</p>
    <p>当前角色：{{jueform.role_name}}</p>
    <p>分配新角色：   <el-select v-model="JueId" placeholder="请选择">
              <el-option
                v-for="item in juelist"
                :key="item.id"
                :label="item.roleName"
                :value="item.id">
              </el-option>
        </el-select></p>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="JueSe = false">取 消</el-button>
    <el-button type="primary" @click="addjue">确 定</el-button>
  </span>
</el-dialog>

      <el-pagination
        style="margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="obj.pagenum"
        :page-sizes="[4, 6, 8, 10]"
        :page-size="obj.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { LjhUser,LjhAdd,LjhXiu,LjhTai } from "@/http/api.js";
import _ from "lodash"
export default {
  data() {
       const emAdd = (rule, value, callback) => {
           const regemail=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
           if(!regemail.test(value)){
              return callback(new Error('请输入正确的邮箱'));
           }
           callback()
       }
       const moAdd=(rule, value, callback) => {
          const regmobile=/^(?:(?:\+|00)86)?1[3-9]\d{9}$/
          if(!regmobile.test(value)){
              return callback(new Error('请输入正确的手机号码'))
          }
          callback()
       }

    return {
       formLabelWidth: '65px',
       JueSe:false,
      jueform:{},
      userid:'',
      JueId:0,
       juelist:[],
      obj: {
        query: "",
        pagenum: 1,
        pagesize: 6,
      },
      formAdd:{
         username:"",
         password:"",
         email:"",
         mobile:""
      },
     
      fromRules:{
          username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        password:[
          {required: true, message:"请输入密码", trigger:'blur' },
          {min:3,max:8,message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        email:[
           {required: true, message:"请输入邮箱", trigger:'blur' },
           { validator: emAdd, trigger: 'blur' }
        ],
        mobile:[
           {required: true, message:"请输入手机号码", trigger:'blur' },
           {validator:moAdd,trigger: 'blur'}
        ]
      },
      total:null,
      xiuid:"",
      data: [],
      dialogFormVisibleAdd:false,
      dialogFormVisibleXiu:false
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    async addjue(){
       await this.$API.LjhFen(this.userid,this.JueId)
          this.getUser()
          this.JueSe=false
    },
    async jue(row){
      this.JueId=''
      console.log(this.JueId)
       this.JueSe=true
        const {id,username,role_name}=row
        this.jueform={username,role_name}
        this.userid=id
        const res=await this.$API.LjhJue()
        this.juelist=res
         console.log(this.juelist)
      //  console.log(this.jueid)
    },
 
    sou:_.debounce(function(){
       this.getUser()
    },300),
    async Tai(row){
       const res=await LjhTai(row.id,row.mg_state)
       this.getUser()
       console.log(res)
    },
    async del(id){
         const res=await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }) .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        console.log('shanchu:',res)
        if(res==='confirm'){
          await this.$API.LjhDel(id);
          this.getUser();
        }
    },
    bian(row){
       this.dialogFormVisibleXiu=true
       const {username,email,mobile}=row
       this.xiuid=row.id
       this.formAdd={username,email,mobile}
    },
     xiu(){
      this.$refs.fromBian.validate(async valid=>{
        if(!valid) return
        const {email,mobile}=this.formAdd
        const res=await LjhXiu(this.xiuid,{email,mobile})
        console.log(res)
        this.getUser()
        this.dialogFormVisibleXiu=false
      })
       
    },
    add(){
       this.$refs.fromTj.validate(async valid=>{
           if(valid){
              const res=await LjhAdd(this.formAdd)
              this.getUser()
              this.formAdd={}
              this.dialogFormVisibleAdd=false
           }else{
             return false
           }
       })

    },
    async getUser() {
      const res = await LjhUser(this.obj);
      this.data = res.users;
      this.total=res.total
    },
      handleSizeChange(val) {
        this.obj.pagesize=val
        this.getUser();
      },
      handleCurrentChange(val) {
         this.obj.pagenum=val
        this.getUser();
      }
  },
  computed: {},

  watch: {
    cart: {
      handler(newValue) {},
      deep: true,

      immediate: true,
    },
  },
};
</script>

<style scoped lang="scss"></style>
